<!-- 来煤煤质 -->
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { EditPen, Refresh } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import type { UploadProps, UploadUserFile, FormInstance, FormRules } from 'element-plus'
import { getToken } from '@/utils/auth'
import service from '@/utils/request'
import { useRouter } from 'vue-router'
const router = useRouter()

const baseURL = service.defaults.baseURL;
console.log('baseURL---', baseURL); 
// table-list 搜索

//table设置
const tableHeight = ref(0)
const listTableData = ref([])

// 定义表格数据的类型
interface TableRow {
  id: number;
  time: string;
  name: string;
  name1: string;
}

// 保存选中项的 ID 列表
const selectedRowIds = ref<Set<number>>(new Set());

// 处理选中项变化的函数
const handleSelectionChange = (selection: TableRow[]) => {
  // 更新选中项 ID 列表
  selectedRowIds.value = new Set(selection.map((item) => item.id));
};

// 自定义行类名的函数
const rowClassName = ({ row }: { row: TableRow }): string => {
  return selectedRowIds.value.has(row.id) ? 'selected-row' : '';
};
const rowInfoClassName = (id:number) => {
    return selectedRowIds.value.has(id) ? 'selected_bg' : '';
}

//table样式自定义
const headerCellStyle = {
    padding:'16px 0'
}

const tableDialogVisible = ref(false)
function clickTableDialog(){
    tableDialogVisible.value = false
    ElMessage({
        message: '已修改，数据已更新',
        type: 'success',
    })
    //ElMessage.error('修改失败，请重新提交')
}


// 新增
const addDialogVisible = ref(false)

const addForm = ref<any>({
    sampleName: '',
    firstCode: '',
    secondCode: '',
    ftId: '',
    amount: '',
    checkDate: '',
    checkFileUrl: '',
    coalQualityProjectData:[
        {
            projectName:'全水分',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'Mt',
            unit:'%'
        },
        {
            projectName:'空干基水分',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'Mad',
            unit:'%'
        },
        {
            projectName:'灰分',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'A',
            unit:'%'
        },
        {
            projectName:'挥发分',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'V',
            unit:'%'
        },
        {
            projectName:'固定碳',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'FC',
            unit:'%'
        },
        {
            projectName:'高位发热量',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'Qgr',
            unit:'MJ/kg'
        },
        {
            projectName:'低位发热量',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'Qnet',
            unit:'MJ/kg'
        },
        {
            projectName:'全硫',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'St',
            unit:'%'
        },
        {
            projectName:'元素分析',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'H',
            unit:'%'
        }
    ]
})
// 修改
const editDialogVisible = ref(false)
const editForm = ref<any>({
    
    sampleName: '',
    firstCode: '',
    secondCode: '',
    ftId: '',
    amount: '',
    checkDate: '',
    checkFileUrl: '',
    coalQualityProjectData:[
        {
            projectName:'全水分',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'Mt',
            unit:'%'
        },
        {
            projectName:'空干基水分',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'Mad',
            unit:'%'
        },
        {
            projectName:'灰分',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'A',
            unit:'%'
        },
        {
            projectName:'挥发分',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'V',
            unit:'%'
        },
        {
            projectName:'固定碳',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'FC',
            unit:'%'
        },
        {
            projectName:'高位发热量',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'Qgr',
            unit:'MJ/kg'
        },
        {
            projectName:'低位发热量',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'Qnet',
            unit:'MJ/kg'
        },
        {
            projectName:'全硫',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'St',
            unit:'%'
        },
        {
            projectName:'元素分析',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'H',
            unit:'%'
        }
    ]
})

const infoDialogVisible = ref(false)

const weightingVisible = ref(false)


// 上传
const headers = ref({
    Authorization: 'Bearer ' + getToken()
})
const fileList = ref<UploadUserFile[]>([])

// 限制上传文件类型和大小
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    console.log('rawFile', rawFile)
    // if (rawFile.type !== 'doc/docx/xls/xlsx/txt/pdf') {
    //     ElMessage.error('请选择格式为doc/docx/xls/xlsx/txt/pdf的文件!')
    //     return false
    // } else 
    if (rawFile.size / 1024 / 1024 > 5) {
        ElMessage.error('文件大小不能超过 5MB!')
        return false
    }
    return true
}

const handleSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
    console.log('uploadFile-----',response.data.url)
    addForm.value.checkFileUrl = response.data.url
}

const handleExceed: UploadProps['onExceed'] = (files: File[], uploadFiles: UploadUserFile[]) => {
    ElMessage.error('只能添加一个文件，请先删除原有文件，在上传')
}

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log('uploadFile----', uploadFile)
    console.log('uploadFiles----', uploadFiles)
    addForm.value.checkFileUrl = ''
}


import { delBunkerInRecord,delFactoryCoalQuality, AllFuelTypeList, FactoryCoalQualityList, addFactoryCoalQuality, editFactoryCoalQuality, FurnaceCoalQualityWeighting, EntryAndBunkerType, FactoryCoalQualityInfo } from "@/api";

// 煤炭种类-下拉框数据
const FuelTypeData = ref<any>([])
const getAllFuelTypeList = () => {
    AllFuelTypeList().then(res=>{
        console.log('字典----煤炭种类',res.data)
        FuelTypeData.value = res.data
    })
}

// 入场编码-下拉框数据
const EntryData = ref<any>([])
const getEntryAndBunkerType = () => {
    EntryAndBunkerType().then(res=>{
        console.log('字典----入场编码',res.data)
        EntryData.value = res.data
    })
}

const changeEntryNo = (value: any) => {
    console.log('changeEntryNo-----',value)
    //console.log(addForm.value)
    //let currentData = EntryData.value.filter((l: { entryNo: any; }) => l.entryNo === value).map((item: { ftId: any; ftName: any; }) => ({ ftId: item.ftId, ftName: item.ftName }))
    
    let currentData = EntryData.value.filter((item: { ftId: any; ftName: any;entryNo:any }) =>
        item.entryNo.includes(value) // 使用 includes 进行部分匹配
    );
    addForm.value.ftId = currentData[0].ftId
    // if (currentData.length > 0) {
    //     addForm.value.ftId = currentData[0].ftId;
    // } else {
    //     console.log("没有找到匹配的数据");
    //     // 处理未找到数据的逻辑，比如设置默认值或显示错误信息
    //     addForm.value.ftId = null; // 或者其他合适的处理方式
    // }
    //console.log('currentData-----', currentData)
}

// 搜索
const searchForm = ref({
    coalSource: '',
    firstCode: '',
    secondCode: '',
    ftId: '',
    
    PageNum: 1, //当前页码
    PageSize: 10, //PageSize
})

const searchFormRef = ref<FormInstance>()
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    getFactoryCoalQualityList()
}

const totalPage = ref(0)
//table-list
function getFactoryCoalQualityList(){
    console.log(searchForm.value)
    FactoryCoalQualityList(searchForm.value).then(res=>{
        console.log('list-------',res.data)
        listTableData.value = res.data.result
        totalPage.value =  res.data.totalNum
    })
}

const weightingData = ref<any>({})
//加权明细 FurnaceCoalQualityWeighting
const clickWeighting = (id:number) => {
    FurnaceCoalQualityWeighting(id).then(res=>{
        console.log('详情----',res.data)
        weightingData.value = res.data
        weightingVisible.value = true
    })
}
const ruleFormRef = ref<FormInstance>()
const ruleFormRef1 = ref<FormInstance>()
        //新增
const clickAddFactoryCoalQuality = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            console.log(addForm.value)
            addFactoryCoalQuality(addForm.value).then(res=>{
                console.log('新增----',res)
                if(res.code === 200){
                    ElMessage({
                        type: 'success',
                        message: '添加成功',
                    })
                    addDialogVisible.value = false
                    getFactoryCoalQualityList()
                }
                else{
                    ElMessage.error(res.msg)
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const dialogTitle = ref('') //新增入炉煤质
const isAddEdit = ref(0)  //0- 新增,1- 修改
const addDialog = (firstCode:any) => {
    
    addForm.value = {
        sampleName: '',
        firstCode: firstCode,
        secondCode: '',
        ftId: '',
        amount: '',
        checkDate: '',
        checkFileUrl: '',
        coalQualityProjectData:[
            {
                projectName:'全水分',
                sarValue: null,
                kadValue: null,
                gdValue: null,
                gdafValue: null,
                symbol:'Mt',
                unit:'%'
            },
            {
                projectName:'空干基水分',
                sarValue: null,
                kadValue: null,
                gdValue: null,
                gdafValue: null,
                symbol:'Mad',
                unit:'%'
            },
            {
                projectName:'灰分',
                sarValue: null,
                kadValue: null,
                gdValue: null,
                gdafValue: null,
                symbol:'A',
                unit:'%'
            },
            {
                projectName:'挥发分',
                sarValue: null,
                kadValue: null,
                gdValue: null,
                gdafValue: null,
                symbol:'V',
                unit:'%'
            },
            {
                projectName:'固定碳',
                sarValue: null,
                kadValue: null,
                gdValue: null,
                gdafValue: null,
                symbol:'FC',
                unit:'%'
            },
            {
                projectName:'高位发热量',
                sarValue: null,
                kadValue: null,
                gdValue: null,
                gdafValue: null,
                symbol:'Qgr',
                unit:'MJ/kg'
            },
            {
                projectName:'低位发热量',
                sarValue: null,
                kadValue: null,
                gdValue: null,
                gdafValue: null,
                symbol:'Qnet',
                unit:'MJ/kg'
            },
            {
                projectName:'全硫',
                sarValue: null,
                kadValue: null,
                gdValue: null,
                gdafValue: null,
                symbol:'St',
                unit:'%'
            },
            {
                projectName:'元素分析',
                sarValue: null,
                kadValue: null,
                gdValue: null,
                gdafValue: null,
                symbol:'H',
                unit:'%'
            }
        ]
    }
    changeEntryNo(firstCode)
    addDialogVisible.value = true
}

// 详情
const secondCodeData = ref<any>([])
const editId = ref('')
function getFactoryCoalQualityInfo(id:any,firstCode:any){
    editDialogVisible.value = true
    addForm.value = {
        sampleName: '',
        firstCode: firstCode,
        secondCode: '',
        ftId: '',
        amount: '',
        checkDate: '',
        checkFileUrl: '',
        coalQualityProjectData:[
            {
                projectName:'全水分',
                sarValue: null,
                kadValue: null,
                gdValue: null,
                gdafValue: null,
                symbol:'Mt',
                unit:'%'
            },
            {
                projectName:'空干基水分',
                sarValue: null,
                kadValue: null,
                gdValue: null,
                gdafValue: null,
                symbol:'Mad',
                unit:'%'
            },
            {
                projectName:'灰分',
                sarValue: null,
                kadValue: null,
                gdValue: null,
                gdafValue: null,
                symbol:'A',
                unit:'%'
            },
            {
                projectName:'挥发分',
                sarValue: null,
                kadValue: null,
                gdValue: null,
                gdafValue: null,
                symbol:'V',
                unit:'%'
            },
            {
                projectName:'固定碳',
                sarValue: null,
                kadValue: null,
                gdValue: null,
                gdafValue: null,
                symbol:'FC',
                unit:'%'
            },
            {
                projectName:'高位发热量',
                sarValue: null,
                kadValue: null,
                gdValue: null,
                gdafValue: null,
                symbol:'Qgr',
                unit:'MJ/kg'
            },
            {
                projectName:'低位发热量',
                sarValue: null,
                kadValue: null,
                gdValue: null,
                gdafValue: null,
                symbol:'Qnet',
                unit:'MJ/kg'
            },
            {
                projectName:'全硫',
                sarValue: null,
                kadValue: null,
                gdValue: null,
                gdafValue: null,
                symbol:'St',
                unit:'%'
            },
            {
                projectName:'元素分析',
                sarValue: null,
                kadValue: null,
                gdValue: null,
                gdafValue: null,
                symbol:'H',
                unit:'%'
            }
        ]
    }
    editId.value = id
    addForm.value.firstCode = firstCode
    changeEntryNo(firstCode)
    FurnaceCoalQualityWeighting(id).then(res=>{
        console.log('详情----',res.data.details)
        secondCodeData.value = res.data.details
    })
}

const changeSecondCode = (value:any) => {
   // console.log(value,secondCodeData.value)
    for (const i in secondCodeData.value) {
        if(value == secondCodeData.value[i].secondCode){
            console.log(secondCodeData.value[i])
            FactoryCoalQualityInfo(secondCodeData.value[i].id).then((res:any)=>{
                console.log('详情----',res.data)
                addForm.value.sampleName = res.data.sampleName
                addForm.value.amount = res.data.amount
                addForm.value.checkDate = res.data.checkDate

            })
        }
    }
}

// 修改
const clickEditFactoryCoalQuality = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            addForm.value.id = editId.value
            //addForm.value['id'] = '新值';
            editFactoryCoalQuality(addForm.value).then(res=>{
                console.log('修改----',res)
                if(res.code === 200){
                    ElMessage({
                        type: 'success',
                        message: '修改成功',
                    })
                    addDialogVisible.value = false
                    getFactoryCoalQualityList()
                }
                else{
                    ElMessage.error(res.msg)
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const rulesForm = ref({
    sampleName: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    amount: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    secondCode: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    firstCode: [
        { required: true, message: '请输入', trigger: 'change' },
    ],
    ftId: [
        { required: true, message: '请输入', trigger: 'change' },
    ],
})

// 批量删除
const batchDel = () => {
    if(selectedRowIds.value.size == 0){
        ElMessage.error('请先选择要批量删除的数据')
    }
    else{
        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        let ids: string = Array.from(selectedRowIds.value).join(', ');
        delBunkerInRecord(ids).then(res=>{
            console.log('删除----',res)
            loading.close()
            if(res.code === 200){
                ElMessage({
                    type: 'success',
                    message: '已成功删除',
                })
                getFactoryCoalQualityList()
            }
            else{
                ElMessage.error('删除失败，请重新删除')
            }
        })
    }
}

onMounted(() => {
    // 获取页面高度
    tableHeight.value = window.innerHeight - 310;
    getAllFuelTypeList()
    getFactoryCoalQualityList()
    getEntryAndBunkerType()
});
</script>
<template>
    <!-- 弹出框/新增 -->
    <el-dialog v-model="addDialogVisible" title="新增来煤煤质" width="900" :align-center="true">
        <div class="dialog_main">
            <el-form ref="ruleFormRef" :rules="rulesForm" :inline="true" :model="addForm" class="mt15 form-inline-row-two" label-width="auto" >
                <el-form-item label="样品名称:" prop="sampleName">
                    <el-input v-model="addForm.sampleName" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="来煤入场编号:" prop="firstCode">
                    <el-select v-model="addForm.firstCode" placeholder="请选择" disabled @change="changeEntryNo">
                        <el-option v-for="item in EntryData" :label="item.entryNo" :value="item.entryNo" />
                    </el-select>
                </el-form-item>
                <el-form-item label="代表煤种:" prop="ftId">
                    <el-select v-model="addForm.ftId" placeholder="根据入场编码获取煤种" disabled>
                        <el-option v-for="item in FuelTypeData" :key="item.ftId" :label="item.ftName" :value="item.ftId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="代表煤量:" prop="amount">
                    <el-input v-model="addForm.amount" placeholder="请输入" />
                </el-form-item>
                
                <!-- <el-form-item label="一次编码:">
                    <el-select v-model="addForm.firstCode" placeholder="请选择"  >
                        <el-option v-for="item in EntryData" :label="item.entryNo" :value="item.entryNo" />
                    </el-select>
                </el-form-item> -->
                <el-form-item label="关联二次编码:" prop="secondCode">
                    <el-input v-model="addForm.secondCode" placeholder="请输入"   />
                    <!-- <span style="width: 10px;"></span>
                    <el-input v-model="addForm.name6" placeholder="请输入"  style="width: 125px;" />
                    <img class="ico_add_btn" src="../../assets/img/ico_add.png" alt=""> -->
                </el-form-item>
                <el-form-item label="化验日期:">
                    <el-date-picker
                        v-model="addForm.checkDate"
                        type="date"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择"
                    />
                </el-form-item>

            </el-form>
            <div class="form_title">相关煤质检测数据</div>
            <div class="table_info small">
                <table>
                    <colgroup>
                        <col width="14%">
                        <col width="15%">
                        <col width="15%">
                        <col width="15%">
                        <col width="15%">
                        <col width="12%">
                        <col width="12%">
                    </colgroup>
                    <tr>
                        <th>项目</th>
                        <th>收到基ar</th>
                        <th>空气干燥基ad</th>
                        <th>干基d</th>
                        <th>干燥无灰基daf</th>
                        <th>符号</th>
                        <th>单位</th>
                    </tr>
                    <tr v-for="item in addForm.coalQualityProjectData">
                        <th>{{ item.projectName }}</th>
                        <td>
                            <el-input v-model="item.sarValue" type="number" step="0.01"></el-input>
                        </td>
                        <td>
                            <el-input v-model="item.kadValue" type="number" step="0.01"></el-input>
                        </td>
                        <td>
                            <el-input v-model="item.gdValue" type="number" step="0.01"></el-input>
                        </td>
                        <td>
                            <el-input v-model="item.gdafValue" type="number" step="0.01"></el-input>
                        </td>
                        <td>{{ item.symbol }}</td>
                        <td>{{ item.unit }}</td>
                    </tr>
                </table>
            </div>
            
            <!-- 上传检测报告 -->
            <div class="upload_report">
                <div class="title">上传检测报告</div>
                <!-- <a href="#" class="blue">上传检测报告</a> -->
                <el-upload
                    v-model:file-list="fileList"
                    class="upload-demo"
                    :action="baseURL+'/Common/UploadFile'"
                    :headers="headers"
                    :limit="1"
                    accept=".doc,.docx,.pdf,.xls,.xlsx,.ppt,.pptx,.txt"
                    :on-success="handleSuccess"
                    :before-upload="beforeAvatarUpload"
                    :on-exceed="handleExceed"
                    :on-remove="handleRemove"
                >
                    <el-button type="primary">选取文件</el-button>
                    <template #tip>
                        <div class="el-upload__tip">
                            请上传大小不超过 <span class="red">5MB</span> 格式为 <span class="red">doc/docx/xls/xlsx/txt/pdf</span> 的文件
                        </div>
                    </template>
                </el-upload>
            </div>

        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;" @click="clickAddFactoryCoalQuality(ruleFormRef)">
                    添加
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 弹出框/修改  -->
    <el-dialog v-model="editDialogVisible" title="修改来煤煤质" width="900" :align-center="true">
        <div class="dialog_main">
            <el-form ref="ruleFormRef1" :rules="rulesForm" :inline="true" :model="addForm" class="mt15 form-inline-row-two" label-width="auto" >
                <el-form-item label="样品名称:" prop="sampleName">
                    <el-input v-model="addForm.sampleName" placeholder="请输入"  />
                </el-form-item>
                <el-form-item label="来煤入场编号:" prop="firstCode">
                    <el-select v-model="addForm.firstCode" placeholder="请选择" disabled @change="changeEntryNo">
                        <el-option v-for="item in EntryData" :label="item.entryNo" :value="item.entryNo" />
                    </el-select>
                </el-form-item>
                <el-form-item label="代表煤种:" prop="ftId">
                    <el-select v-model="addForm.ftId" placeholder="根据入场编码获取煤种" disabled>
                        <el-option v-for="item in FuelTypeData" :key="item.ftId" :label="item.ftName" :value="item.ftId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="代表煤量:" prop="amount">
                    <el-input v-model="addForm.amount" placeholder="请输入" />
                </el-form-item>
                
                <!-- <el-form-item label="一次编码:">
                    <el-select v-model="addForm.firstCode" placeholder="请选择"  >
                        <el-option v-for="item in EntryData" :label="item.entryNo" :value="item.entryNo" />
                    </el-select>
                </el-form-item> -->
                <el-form-item label="关联二次编码:" prop="secondCode">
                    <el-select v-model="addForm.secondCode" placeholder="请选择" @change="changeSecondCode">
                        <el-option v-for="item in secondCodeData" :label="item.secondCode" :value="item.secondCode" />
                    </el-select>
                    <!-- <el-input v-model="addForm.secondCode" placeholder="请输入"   /> -->
                    <!-- <span style="width: 10px;"></span>
                    <el-input v-model="addForm.name6" placeholder="请输入"  style="width: 125px;" />
                    <img class="ico_add_btn" src="../../assets/img/ico_add.png" alt=""> -->
                </el-form-item>
                <el-form-item label="化验日期:" prop="checkDate">
                    <el-date-picker
                        v-model="addForm.checkDate"
                        type="date"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择"
                    />
                </el-form-item>

            </el-form>
            <div class="form_title">相关煤质检测数据</div>
            <div class="table_info small">
                <table>
                    <colgroup>
                        <col width="14%">
                        <col width="15%">
                        <col width="15%">
                        <col width="15%">
                        <col width="15%">
                        <col width="12%">
                        <col width="12%">
                    </colgroup>
                    <tr>
                        <th>项目</th>
                        <th>收到基ar</th>
                        <th>空气干燥基ad</th>
                        <th>干基d</th>
                        <th>干燥无灰基daf</th>
                        <th>符号</th>
                        <th>单位</th>
                    </tr>
                    <tr v-for="item in addForm.coalQualityProjectData">
                        <th>{{ item.projectName }}</th>
                        <td>
                            <el-input v-model="item.sarValue" type="number" step="0.01"></el-input>
                        </td>
                        <td>
                            <el-input v-model="item.kadValue" type="number" step="0.01"></el-input>
                        </td>
                        <td>
                            <el-input v-model="item.gdValue" type="number" step="0.01"></el-input>
                        </td>
                        <td>
                            <el-input v-model="item.gdafValue" type="number" step="0.01"></el-input>
                        </td>
                        <td>{{ item.symbol }}</td>
                        <td>{{ item.unit }}</td>
                    </tr>
                </table>
            </div>
            
            <!-- 上传检测报告 -->
            <div class="upload_report">
                <div class="title">上传检测报告</div>
                <!-- <a href="#" class="blue">上传检测报告</a> -->
                <el-upload
                    v-model:file-list="fileList"
                    class="upload-demo"
                    :action="baseURL+'/Common/UploadFile'"
                    :headers="headers"
                    :limit="1"
                    accept=".doc,.docx,.pdf,.xls,.xlsx,.ppt,.pptx,.txt"
                    :on-success="handleSuccess"
                    :before-upload="beforeAvatarUpload"
                    :on-exceed="handleExceed"
                    :on-remove="handleRemove"
                >
                    <el-button type="primary">选取文件</el-button>
                    <template #tip>
                        <div class="el-upload__tip">
                            请上传大小不超过 <span class="red">5MB</span> 格式为 <span class="red">doc/docx/xls/xlsx/txt/pdf</span> 的文件
                        </div>
                    </template>
                </el-upload>
            </div>

        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;" @click="clickEditFactoryCoalQuality(ruleFormRef1)">
                    修改
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 弹出框/修改 
    <el-dialog v-model="editDialogVisible" title="修改来煤煤质" width="900" :align-center="true">
        <div class="dialog_main">
            <el-form :inline="true" :model="editForm" class="mt15 form-inline-row-two" label-width="100" >
                <el-form-item label="样品名称:">
                    <el-input v-model="editForm.name" placeholder="请输入" clearable  style="width: 260px;" />
                </el-form-item>
                <el-form-item label="来煤入场编号:">
                    <el-select v-model="editForm.name" placeholder="请选择" clearable  style="width: 260px;">
                        <el-option label="编号11" value="11" />
                        <el-option label="编号22" value="22" />
                    </el-select>
                </el-form-item>
                <el-form-item label="代表煤种:">
                    <el-input v-model="editForm.name" placeholder="请输入" clearable  style="width: 260px;" />
                </el-form-item>
                <el-form-item label="代表煤量:">
                    <el-input v-model="editForm.name" placeholder="请输入" clearable  style="width: 260px;" />
                </el-form-item>
                
                <el-form-item label="一次编码:">
                    <el-input v-model="editForm.name" placeholder="请输入" clearable  style="width: 260px;" />
                </el-form-item>
                <el-form-item label="关联二次编码:">
                    <el-input v-model="editForm.name" placeholder="请输入"  style="width: 125px;" />
                    <span style="width: 10px;"></span>
                    <el-input v-model="editForm.name" placeholder="请输入"  style="width: 125px;" />
                    <img class="ico_add_btn"src="../../assets/img/ico_add.png" alt="">
                </el-form-item>
                <el-form-item label="化验日期:">
                    <el-date-picker
                        v-model="editForm.name"
                        type="date"
                        placeholder="请选择"
                        style="width: 260px;"
                    />
                </el-form-item>

            </el-form>
            <div class="form_title">相关煤质检测数据</div>
            <div class="table_info small">
                <table>
                    <colgroup>
                        <col width="14%">
                        <col width="15%">
                        <col width="15%">
                        <col width="15%">
                        <col width="15%">
                        <col width="12%">
                        <col width="12%">
                    </colgroup>
                    <tr>
                        <th>项目</th>
                        <th>收到基ar</th>
                        <th>空气干燥基ad</th>
                        <th>干基d</th>
                        <th>干燥无灰基daf</th>
                        <th>符号</th>
                        <th>单位</th>
                    </tr>
                    <tr>
                        <th>全水分</th>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>空干基水分</th>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>灰分</th>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>挥发分</th>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>固定碳</th>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>高位发热量</th>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>低位发热量</th>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>全硫</th>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>元素分析</th>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                </table>
            </div>
            
            
            <div class="upload_report">
                <div class="name">上传煤质检测报告</div>
                <p>
                    <img src="../../assets/img/3.jpg" width="130" alt="">
                    <a href="#" class="blue">预览检测报告</a>
                    <a href="#" class="blue">更新检测报告</a>
                </p>
            </div>

        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;" @click="onSubmit">
                    添加
                </el-button>
            </div>
        </template>
    </el-dialog>
    -->

    <!-- 弹出框/详情 -->
    <el-dialog v-model="infoDialogVisible" title="来煤煤质详情" width="900" :align-center="true">
        <div class="dialog_main">
            <ul class="edit_info mt15">
                <li>
                    <span>样品名称:</span>
                    <p>华为</p>
                </li>
                <li>
                    <span>来煤批次号:</span>
                    <p>12345687</p>
                </li>
                <li>
                    <span>代表煤种:</span>
                    <p>褐煤</p>
                </li>
                <li>
                    <span>代表煤量:</span>
                    <p>17013(吨)</p>
                </li>
                <li>
                    <span>一次编码:</span>
                    <p>1235</p>
                </li>
                <li>
                    <span>关联二次编码:</span>
                    <p>********</p>
                </li>
                <li>
                    <span>化验日期:</span>
                    <p>2023-06-09</p>
                </li>
            </ul>
            
            <div class="form_title">相关煤质检测数据</div>
            <div class="table_info small">
                <table>
                    <colgroup>
                        <col width="14%">
                        <col width="15%">
                        <col width="15%">
                        <col width="15%">
                        <col width="15%">
                        <col width="12%">
                        <col width="12%">
                    </colgroup>
                    <tr>
                        <th>项目</th>
                        <th>收到基ar</th>
                        <th>空气干燥基ad</th>
                        <th>干基d</th>
                        <th>干燥无灰基daf</th>
                        <th>符号</th>
                        <th>单位</th>
                    </tr>
                    <tr>
                        <th>全水分</th>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>空干基水分</th>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>灰分</th>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>挥发分</th>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>固定碳</th>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>高位发热量</th>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>低位发热量</th>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>全硫</th>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>元素分析</th>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>21.02</td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                </table>
            </div>

            <!-- 上传检测报告 -->
            <div class="upload_report">
                <div class="name">相关煤质检测报告</div>
                <p>
                    <img src="../../assets/img/3.jpg" width="130" alt="">
                    <a href="#" class="blue">预览检测报告</a>
                    <a href="#" class="blue">下载检测报告</a>
                </p>
            </div>

        </div>
    </el-dialog>

    <!-- 弹出框/加权明细 -->
    <el-dialog v-model="weightingVisible" title="加权明细" width="1500" :align-center="true">
        <div class="dialog_main">
            <div class="forecast_title">
                入厂煤分析加权值计算表
            </div>
            <el-form :inline="true">
                <el-form-item label="煤源:">
                    <p style="margin-right: 200px;">{{ weightingData.coalSource }}</p>
                </el-form-item>
                <el-form-item label="船名:">
                    <p style="margin-right: 200px;">{{ weightingData.shipName }}</p>
                </el-form-item>
                <el-form-item label="一次编码:">
                    <p style="margin-right: 200px;">{{ weightingData.firstCode }}</p>
                </el-form-item>
                <el-form-item label="总卸煤量:">
                    <p style="margin-right: 200px;">{{ weightingData.unloadingWeight }}</p>
                </el-form-item>
            </el-form>
            <div class="table_info small">
                <table>
                    <tr>
                        <th>序号</th>
                        <th>二次编码</th>
                        <th>化验日期</th>
                        <th>代表煤量(t)</th>
                        <th>空干基水分</th>
                        <th>空干基挥发份</th>
                        <th>空干基灰分</th>
                        <th>空干基全硫</th>
                        <th>空干基氢</th>
                        <th>空干基高位发热量</th>
                        <th>干基高位发热量</th>
                        <th>收到基低位发热量</th>
                        <th>全水</th>
                    </tr>
                    <tr v-for="(item,index) in weightingData.details">
                        <th>{{ index+1 }}</th>
                        <td>{{ item.secondCode }}</td>
                        <td>{{ item.checkDate }}</td>
                        <td>{{ item.amount }}</td>
                        <td>{{ item.qgrAd }}</td>
                        <td>{{ item.qdAd }}</td>
                        <td>{{ item.mt }}</td>
                        <td>{{ item.aad }}</td>
                        <td>{{ item.had }}</td>
                        <td>{{ item.stAr }}</td>
                        <td>{{ item.gdHighHeat }}</td>
                        <td>{{ item.qnetArMj }}</td>
                        <td>{{ item.qbAd }}</td>
                    </tr>
                </table>
               
            </div>
            <!-- 上传检测报告 -->
            <div v-if="weightingData.attachmentAvailable" class="upload_report">
                <div class="name">相关煤质检测报告</div>
                <p>
                    <img src="../../assets/img/3.jpg" width="130" alt="">
                    <a :href="weightingData.relatedCheckReport" class="blue">预览检测报告</a>
                    <a :href="weightingData.relatedCheckReport" class="blue">下载检测报告</a>
                </p>
            </div>
        </div>
        <template v-if="weightingData.attachmentAvailable" #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;">
                    下载
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 弹出框 -->
    <el-dialog v-model="tableDialogVisible" width="400" :align-center="true" center>
        <div class="table_dialog">
            <img src="../../assets/img/ico_5.png" alt="">
            <strong>您确定要保存修改内容吗？</strong>
            <span>
                修改内容保存后不可撤回，且会覆盖之前数据
            </span>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="tableDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="clickTableDialog">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 搜索 -->
    <div class="search_bor_bg">
        <el-form ref="searchFormRef" :inline="true" :model="searchForm" class="from_search_inline"  >
            <el-form-item label="煤源:" prop="sampleName">
                <el-input v-model="searchForm.coalSource" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="一次编码:" prop="firstCode">
                <el-input v-model="searchForm.firstCode" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="二次编码:" prop="secondCode">
                <el-input v-model="searchForm.secondCode" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="煤种:" prop="ftId">
                <el-select v-model="searchForm.ftId" placeholder="请选择" style="width: 150px">
                    <el-option v-for="item in FuelTypeData" :key="item.ftId" :label="item.ftName" :value="item.ftId" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" color="#2565C8" @click="getFactoryCoalQualityList">搜索</el-button>
                <el-button style="padding:0 8px;" @click="resetForm(searchFormRef)">
                    <el-icon size="20">
                        <Refresh />
                    </el-icon>
                </el-button>
            </el-form-item>
        </el-form>
    </div>

    <div class="box_bg mt15">
        <div class="record_set">
            <el-button type="primary" color="#2565C8" >导出</el-button>
            <el-button type="primary" color="#2565C8" @click="batchDel">批量删除</el-button>
<!--             
            <el-button type="primary" color="#2565C8" @click="addDialog">新增</el-button>
             -->
        </div>
        <div class="table_list mt15">
            <el-table class="custom-table" 
                :data="listTableData" 
                size="large" 
                :border="false" 
                :stripe="false" 
                :highlight-current-row="false"
                :height="tableHeight"
                :header-cell-style="headerCellStyle"
                style="width: 100%;" 
                :row-class-name="rowClassName"
                ref="multipleTableRef"
                @selection-change="handleSelectionChange">
                
                <el-table-column type="selection" width="50" align="right" />
                <el-table-column type="expand">
                    <template #default="props">
                        <div class="table_list_info" :class="rowInfoClassName(props.row.id)">
                            <div class="table_info">
                                <table>
                                    <tr>
                                        <th>空干基高位发热量</th>
                                        <th>收到基低位发热量</th>
                                        <th>空干基水分</th>
                                        <th>空干基挥发份</th>
                                        <th>空干基灰分</th>
                                        <th>空干基全硫</th>
                                        <th>空干基氢</th>
                                        <th>全水</th>
                                    </tr>
                                    <tr v-if="props.row.expandable">
                                        <td>{{ props.row.expanded.stAr }}</td>
                                        <td>{{ props.row.expanded.qnetArMj }}</td>
                                        <td>{{ props.row.expanded.qgrAd }}</td>
                                        <td>{{ props.row.expanded.qdAd }}</td>
                                        <td>{{ props.row.expanded.mt }}</td>
                                        <td>{{ props.row.expanded.aad }}</td>
                                        <td>{{ props.row.expanded.had }}</td>
                                        <td>{{ props.row.expanded.qbAd }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="煤源" prop="coalSource" />
                <el-table-column label="船名" prop="shipName" />
                <el-table-column label="煤质分类" prop="coalCategory" />
                <el-table-column label="入厂编码" prop="inNo" />
                <el-table-column label="一次编码" prop="firstCode" />
                <el-table-column label="化验日期" prop="checkDate" />
                <el-table-column label="代表煤量(t)" prop="amount" />
                <el-table-column label="空干基高位发热量" prop="stAr" />
                <el-table-column align="center" label="操作" width="250">
                    <template #default="scope">
                        <div class="table_btn">
                            <a href="javascript:;" @click="addDialog(scope.row.firstCode)">新增</a>|
                            <a href="javascript:;" @click="getFactoryCoalQualityInfo(scope.row.id, scope.row.firstCode)">修改</a>|
                            <a href="javascript:;" @click="clickWeighting(scope.row.id)">查看加权明细</a>
                            <!-- <a href="javascript:;" @click="infoDialogVisible = true">查看详情</a> -->
                        </div>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <div class="pagination">
            <el-pagination v-model:current-page="searchForm.PageNum" v-model:page-size="searchForm.PageSize" @current-change="getFactoryCoalQualityList" :total="totalPage"  background layout="prev, pager, next" />
        </div>

    </div>

</template>
<style scoped lang="scss">
.upload_report{
    display: flex;
    .title{
        flex-shrink: 0;
        width: 14%;
        text-align: center;
        line-height: 32px;
    }
}

::v-deep(.el-table__body-wrapper){
    background: #F6FAFE !important;
}
::v-deep(.el-table__inner-wrapper:before){
    display: none; //下边线
}
::v-deep(.el-table thead th) {
  color: #333 !important;
  background: #CCDDF9;
}
::v-deep(.el-table__body){
    border-spacing: 0px 13px !important;
}
::v-deep(.el-table__row td){
    border-top:1px solid #E0E5ED !important;
    border-bottom:1px solid #E0E5ED !important;
}
::v-deep(.el-table__row td:first-child){
    border-left:1px solid #E0E5ED !important;
}
::v-deep(.el-table__row td:last-child){
    border-right:1px solid #E0E5ED !important;
}
::v-deep(.el-table__row:hover td){
    background: #ecf5ff!important;
}
::v-deep(.el-table__expanded-cell){
    border:1px solid #E0E5ED !important;
    padding:0 !important;
    //border-top: none !important; 
}
// ::v-deep(.el-table__expanded-cell td){
//     background: #ecf5ff!important;
// }
::v-deep(.el-table__expanded-cell:hover) {
  background-color: #ecf5ff !important;
}
::v-deep(.el-table__row.selected-row td){
    background: #FFDE9A !important;
}
</style>